<template>
  <div
    class="flex items-center p-y-4px text-12px"
    :style="{ backgroundColor: property.backgroundColor, color: property.textColor }"
  >
    <el-image :src="property.iconUrl" class="h-18px" />
    <!-- <el-divider direction="vertical" /> -->
    <el-carousel height="24px" direction="vertical" :autoplay="true" class="flex-1 p-r-8px">
        <div class="h-24px truncate leading-24px">{{ state.notice.title }}</div>
    </el-carousel>
    <el-image :src="property.arrowUrl" class="h-18px" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { NoticeVO } from '@/api/system/notice';
import { NoticeBarProperty } from './config'

import * as NoticeApi from '@/api/system/notice'

const state  =ref({
  notice: {} as NoticeVO,
})

/** 公告栏 */
defineOptions({ name: 'NoticeBar' })

const props = defineProps<{ property: NoticeBarProperty }>()

const goMore = () => {
  if (props.property.noticeMoreUrl) {
    window.open(props.property.noticeMoreUrl, '_blank')
  }
}

watch(
  () => props.property.noticeId,
  async (id) => {
    if (id) {
      state.value.notice = await NoticeApi.getNotice(Number(id))
      }
  },
  { immediate: true }
)
</script>

<style scoped lang="scss"></style>
